<script>
import UniPopup from "../../../../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import analysisVideo from "../../analysisVideo.vue";
import arrayUtils from "../../../../../../utils/arrayUtils";
import closeIcon from "../../../assets/close.png";
import uniPopup from "@/components/no-mask-popup/uni-popup.vue";
import analysis from "./analysis.vue";
export default {
  name: "answerSheet",
  components: { analysisVideo, UniPopup, uniPopup, analysis },
  computed: {
    // 将题目列表转置为二维数组用于swiper组件渲染
    textQuestionListRender() {
      return arrayUtils.toTwoDimensionalArray(this.textQuestionList, 8);
    },
    currentQuestion() {
      const currentQuestion = this.questionList[this.currentQuestionIndex];
      this.currentQuestionSelectedMark = currentQuestion.userAnswer ? currentQuestion.userAnswer : "";
      return currentQuestion ? currentQuestion : {};
    },
  },
  data() {
    return {
      closeIcon,
      lastBtn: "", //用于标识用户点击的上一个按钮，以提供相应的样式效果进行标识，增强用户体验
      currentQuestionSelectedMark: "",
    };
  },
  props: {
    viewAnalysis: {
      type: Boolean,
      default: false,
    },
    currentQuestionIndex: {
      type: Number,
      default: 0,
    },
    questionList: {
      type: Array,
      default: () => [],
    },
    textQuestionList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    open() {
      this.$refs["answer-sheet"].open();
    },
    // 切换到上一题
    prevQuestion() {
      this.$emit("update:currentQuestionIndex", this.currentQuestionIndex - 1);
    },
    //切换到下一题
    nextQuestion() {
      if (this.currentQuestionIndex < this.questionList.length - 1) {
        this.$emit("update:currentQuestionIndex", this.currentQuestionIndex + 1);
      }
    },
    //判断该选项之前是否选过
    isOptionSelectedBefore(mark) {
      for (let question of this.questionList) {
        if (question.userAnswer === mark) {
          return true;
        }
      }
      return false;
    },
  },
  inject: ["root", "parent"],
  emits: ["submit", "update:currentQuestionIndex", "handleAnswer"],
};
</script>

<template>
  <uni-popup ref="answer-sheet" type="bottom" :is-mask-click="false" mask-background-color="transparent">
    <view class="answer-sheet-content">
      <view class="header">
        <view class="title">{{ currentQuestion.content }}、</view>
        <image class="close-icon" :src="closeIcon" @click="$refs['answer-sheet'].close()"></image>
      </view>
      <view class="content">
        <!--				问题选项列表-->
        <!--					答题模式展示-->
        <swiper style="height: 430rpx; margin-top: 30rpx" :indicator-dots="true" v-if="!viewAnalysis">
          <swiper-item v-for="(array, index) in textQuestionListRender" :key="index">
            <view class="option-list">
              <view
                class="option-item"
                v-for="(item, index2) in array"
                :key="item.id"
                :class="{
                  hasDo: isOptionSelectedBefore(item.mark),
                  currentSelect: currentQuestionSelectedMark === item.mark,
                }"
                @click="
                  () => {
                    $emit('handleAnswer', item.mark);
                    currentQuestionSelectedMark = item.mark;
                    $setTimeout(nextQuestion, 500);
                  }
                "
              >
                {{ item.mark }}. {{ item.content }}
              </view>
            </view>
          </swiper-item>
        </swiper>
        <!--				题目解析-->
				<analysis v-else :text-question-list="textQuestionList" :current-question="currentQuestion"></analysis>
      </view>
      <view class="footer">
        <view class="btn" @click="parent.$refs.answerRecord.open(questionList)">题目一览 </view>
        <view
          class="btn"
          @click="
            lastBtn = 'prevQuestion';
            prevQuestion();
          "
          :class="[lastBtn === 'prevQuestion' ? 'active' : '']"
          v-if="currentQuestionIndex > 0"
          >上一题
        </view>
        <!--					做第一题时把上一题按钮禁用掉-->
        <view class="btn disable" v-else>上一题</view>
        <view
          class="btn"
          @click="
            lastBtn = 'nextQuestion';
            nextQuestion();
          "
          :class="[lastBtn === 'nextQuestion' ? 'active' : '']"
          v-if="currentQuestionIndex < questionList.length - 1"
          >下一题
        </view>
        <!--					最后一道题显示提交按钮-->
        <view class="btn" v-else-if="!viewAnalysis" @click="$emit('submit')">完成作答 </view>
        <view class="btn disable" v-else>下一题</view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.answer-sheet-content {
  background: white;
  border-radius: 40rpx 40rpx 0 0;
  padding: {
    top: 30rpx;
    left: 30rpx;
    right: 30rpx;
  }
  border: 4rpx inset #999999;
  height: 726rpx;
  display: flex;
  flex-direction: column;
  > .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .title {
      font-size: calc(36rpx * var(--font-size-rate));
      font-weight: bold;
    }
    > .close-icon {
      width: 60rpx;
      height: 60rpx;
    }
  }
  > .content {
    height: 0;
    flex: 1;
    overflow-y: scroll;
		padding-bottom: 15rpx;
    .option-list {
      display: flex;
      flex-wrap: wrap;
      .option-item {
        width: calc((100% - 20rpx) / 2);
        height: 80rpx;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(34rpx * var(--font-size-rate));
        margin-bottom: 20rpx;
        background: var(--gray-background-color);
        //选择奇数的
        &:nth-child(odd) {
          margin-right: 10rpx;
        }
        //选择偶数的
        &:nth-child(even) {
          margin-left: 10rpx;
        }
        &.hasDo {
          background: var(--theme-color-light);
        }
        &.currentSelect {
          background: var(--subtheme-color);
        }
      }
    }
  }
  > .footer {
    display: flex;
    justify-content: space-around;
    padding-bottom: 30rpx;
    .btn {
      height: 60rpx;
      display: flex;
      align-items: center;
      border-radius: 40rpx;
      padding: 0 40rpx;
      border: 4rpx solid #999999;
      font-size: calc(30rpx * var(--font-size-rate));
      background: var(--theme-color-light);
      &.disable {
        opacity: 0.5;
      }
      &.active {
        border: 4rpx solid var(--text-color-theme);
      }
    }
  }
}
</style>
